<template>
	<view class="page">
		<view class="search">
			<view class="select flex-b" @click="show = true">
				<view>{{ buildingName }}</view>
				<image style="width: 16rpx; height: 10rpx" src="/static/image/icon-10.png"></image>
			</view>
			<u-select v-model="show" :list="list" label-name="buildingName" value-name="id"
				@confirm="confirm"></u-select>
			<view class="line">|</view>
			<view class="flex">
				<image style="width: 27rpx; height: 27rpx; margin-right: 12rpx" src="/static/image/icon-11.png"></image>
				<input placeholder="搜索门店" v-model="serchMeetingName" @keyup.enter="getBuildingName"
					@input="getBuildingName" />
			</view>
		</view>
		<view v-if="makeList.length>0">
			 <meeting-card   :list="makeList"   @book="goUrl" ></meeting-card>
		</view>
		<view v-else class="none">暂无数据</view>
	</view>
</template>

<script>
	import timeSlot from '@/components/time-slot/time-slot.vue';
	import MeetingCard  from '@/components/meeting/meetingCard.vue'
	import {
		getList,
		getPath,
		getBuildingByList
	} from '@/api/main/main';
	export default {
		components: {
			timeSlot,
			MeetingCard
		},
		data() {
			return {
				makeList: [],
				path: getPath(),
				show: false,
				list: [],
				building: null,
				buildingName: null,
				buildingId: null,
				serchMeetingName: null,
				debounceTimer: null
			};
		},
		onShow() {
			console.log(" shape --> 进入页面！！！");
			this.getBuildingByList();
			this.selectList(this.buildingId,this.serchMeetingName);
		},
		methods: {
			getBuildingName(e) {
				// 清除之前的定时器
				clearTimeout(this.debounceTimer);
				// 设置新的定时器，1秒后执行搜索
				this.debounceTimer = setTimeout(() => {
					console.log("getBuildingName --> ", e.detail.value);
					this.selectList(this.buildingId, e.detail.value)
				}, 500);
			},
			selectList(val, meetingName) {
				const _this = this;
				getList({
					buildingId: val,
					meetingName: meetingName ? meetingName : null
				}).then((res) => {
					_this.makeList = res.data;
				});
			},
			async getBuildingByList() {
				const _this = this;
				await getBuildingByList({}).then((res) => {
					this.list = res.data;
					this.buildingId = this.list[0].id;
					this.buildingName = this.list[0].buildingName;
				});
			},
			confirm(e) {
				console.log("confirm -->", e);
				this.buildingName = e[0].label;
				this.buildingId = e[0].value;
				this.selectList(this.buildingId,this.serchMeetingName)
			},
			goUrl(item) {
				if (!uni.getStorageSync("token")) {
					uni.showToast({
						title: '请前往登录',
						icon: 'none'
					})
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/my/index'
						})
					}, 2000)
					return
				}
				uni.navigateTo({
					url: '/pages/index/details?item=' + JSON.stringify(item)
				});
			}
		}
	};
</script>

<style>
	.none {
		text-align: center;
		line-height: 300rpx;
	}

	.page {
		background: rgba(245, 245, 245, 1);
		height: 100vh;
		overflow-y: auto;
	}

	.f-24 {
		font-size: 24rpx;
	}

	.f-32 {
		font-size: 32rpx;
	}

	.f0 {
		color: rgba(216, 31, 37, 1);
	}

	.grey {
		color: rgba(102, 102, 102, 1);
	}

	.search {
		display: flex;
		align-items: center;
		background: #fff;
		border-radius: 50rpx;
		margin: 26rpx 30rpx;
		height: 72rpx;
		line-height: 72rpx;
	}

	.select {
		width: 200rpx;
		padding-left: 24rpx;
	}

	.list {
		padding: 0 30rpx;
	}

	.list .item {
		background: #fff;
		border-radius: 16rpx;
		padding: 30rpx;
	}

	.list .item image {
		border-radius: 20rpx;
	}

	.right {
		width: 60%;
		margin-left: 30rpx;
	}

	.flex {
		display: flex;
		align-items: center;
	}

	.flex-b {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.right .btn {
		background: rgba(100, 194, 149, 1);
		border-radius: 8rpx;
		padding: 12rpx 20rpx;
		color: #fff;
	}

	.hy-title {
		color: rgba(34, 34, 34, 1);
		font-size: 32rpx;
		font-weight: 500;
		margin-bottom: 12rpx;
	}

	.mb-56 {
		margin-bottom: 112rpx;
	}

	.color-card {
		width: 24rpx;
		height: 8rpx;
		background: rgba(100, 194, 149, 1);
		margin-right: 14rpx;
	}

	.color-card2 {
		width: 24rpx;
		height: 8rpx;
		background: rgba(238, 238, 238, 1);
		margin-right: 14rpx;
	}

	.color-card3 {
		width: 24rpx;
		height: 8rpx;
		background: rgba(255, 165, 0, 1);
		margin-right: 14rpx;
	}

	.line {
		width: 36rpx;
		text-align: center;
		/* margin: 0 16rpx; */
	}
</style>